<%--
  Created by IntelliJ IDEA.
  User: 李东阳
  Date: 2021/12/21
  Time: 16:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=ihdnrGRX1wZeOWEG6aGfYad8j9ppIggK"></script>
</head>
<body>


<%--vue包裹--%>
<div class="container" id="app">
    <div class="" style="height: 635px;background-color: rgb(251,251,251);" >
        <!--   顶部 -->
        <div class="dingbu row" style="padding-top: 40px;padding-left: 80px">
            <div class="dingbu_left col-lg-5" style="height: 550px;width: 505px;  border: 3px inset #e3e3e3;position: relative">
                <img class="img-fluid img-rounded " :src="imgSrc(movie.mid)" alt="" style="height: 540px;width: 480px;">
                <button class="btn-primary btn-lg" style="width: 70px;position: absolute;left: -10px;top: -5px;">{{movie.mgrade}}</button>
            </div>
            <div class="dingbu_right col-lg-5" style="height: 550px;width: 490px;background-color: #eeeeee;margin-left: 25px">
                <div class="text-center" style="margin-top: 20px"><p style="font-weight: bold;font-size: 40px">{{movie.mname}}</p>
                    <p ><b>导演：</b>{{movie.mdirector}}</p>
                    <p ><b>语种：</b>{{movie.mlanguage}}</p>
                    <p ><b>地区：</b>{{movie.mcountry}}</p>



                </div>
                <div style="height: 340px;margin-top: 20px;padding-top: 20px;border-top: 1px solid #e3e3e3">
                    <span><b>电影简介：</b>{{movie.minfo}}</span>
                    <div style="position: relative; left: 310px;top: 40px"><a :href="movieSrc(movie.mlink)" target="_blank"><button class="btn-success btn-lg">观看影片</button></a></div>
                </div>
            </div>
        </div>

    </div>


    </div>
<%--vue包裹结束--%>


<%--下部区开始--%>
<div class="container" style="margin-top: 60px">
    <div class="row">
        <div class="mod_copyright col-md-12 text-center" >
            <p class="mod_copyright_links" style="font-size: 11px">
                关于我们  |  联系我们  |  联系客服  |  商家入驻  |  营销中心  |  鞋品优购  |  友情链接  |  销售联盟  |  品优购社区  |  品优购公益  |  English Site  |  Contact U
            </p>
            <p class="mod_copyright_info" style="font-size: 11px">
                地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn  <br>
                京ICP备08001421号京公网安备110108007702
            </p>

        </div>
    </div>
</div>
<%--        下部区结束--%>



<script>
    var vue = new Vue({
        el:'#app',
        data(){
            return{
                movie:JSON.parse(localStorage.getItem("movie"))
            }
        },
        methods:{
            imgSrc(mid){
                return "img/"+mid+".jpg"
            },
            movieSrc(mlink){
                return mlink
            }
        }


    })
</script>



</body>
</html>
